<template>
    <div v-show="list.length">uyvkvj
        <div  class="list-control">
             <span>排序</span>
             <span class="list-control-order-item"
              :class="{on:order===''}"
              @click="handleOrderDefault"
             >默认</span>
             <span
              class="list-control-order-item"
              :class="{on:order==='sales'}"
              @click="handleOrderSales"
             >销量
             <template v-if="order==='sales'">↓</template>
             </span>
      <span
        class="list-control-order-item"
        :class="{on:order.indexOf('cost')>-1}"
        @click="handleOrderCost"
      >
       价格
       <template v-if="order==='cost-asc'"

       >↑</template>
       <template v-if="order==='cost-desc'">↓</template>
      </span>
        </div>

     <div class="product-not-found"
      v-show="!filteredAndOrderedList.length"
     >
      暂无相关商品
     </div>
    </div>
</template>
<script>
export default {
  components: { },
  data () {
    return {
      // 排序依据
      // sales(销量))
      // cost-desc(价格降序)
      // cost-asc（价格升序）
      order: ''
    }
  },
  methods: {
    handleOrderDefault () {
      this.order = ''
    },
    handleOrderSales () {
      this.order = 'sales'
    },
    handleOrderCost () {
      if (this.order === 'cost-desc') {
        this.order = 'cost-asc'
      } else {
        this.order = 'cost-desc'
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .product-not-found{
      text-align: center;
      padding: 32px;
        }
        .list-control{
            background: #fff;
            border-radius: 6px;
            margin:16px;
            padding: 16px;
            box-shadow: 0 1px 1px rgba(0,0,0,2);
        }
        .list-control-filter{
            margin-bottom: 16px;
        }
        .list-control-filter-item,
        .list-control-order-item{
           cursor: pointer;
            display: inline-block;
            border: 1px solid #e9eaec;
            border-radius: 4px;
            margin-right: 6px;
            padding: 2px 6px;
        }
        .list-control-filter-item.on,
        .list-control-order-item.on{
            background:#f2352e;
            border:1px solid #f2352e;
            color: #fff;
        }
</style>
